<template>
    <div class="detail_content">
        <el-header style="background-color:#FFFFFF;display:flex;align-items:center;z-index: 9;" class="elheaders">
            <div class="flex aic list_content_btn" v-if="state.type == 0">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <el-button type="danger" @click="refuseClick">初筛未通过</el-button>
                <el-button type="success" @click="passClick">初筛通过</el-button>
                <el-button type="primary" @click="addClick">添加标签</el-button>
                <el-dropdown trigger="click" style="margin-left: 16px;" v-if="false">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <!-- <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 1">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <el-button type="danger" @click="refuseClick">应聘部门未通过</el-button>
                <el-button type="success" @click="passClick">应聘部门通过</el-button>
                <!-- <el-button type="primary" @click="sendClicks">发送简历给面试官</el-button> -->
                <el-dropdown trigger="click" style="margin-left: 16px;">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <!-- <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 2">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <!-- <el-button type="primary" @click="sendClicks">发送简历给面试官</el-button> -->
                <el-button type="danger" @click="refuseClick">笔试未通过</el-button>
                <el-button type="success" @click="passClick">笔试通过</el-button>

                <el-dropdown trigger="click" style="margin-left: 16px;">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item>
                            <!-- <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
                <!-- <el-button type="primary" @click="PenFileClick">导入笔试成绩</el-button> -->
                <!-- <el-button type="primary" @click="PenClick">发送笔试通知</el-button> -->
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 3">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <!-- <el-button type="primary" @click="sendClicks">发送简历给面试官</el-button> -->
                <el-button type="danger" @click="GiveUpClick">放弃面试</el-button>
                <el-button type="danger" @click="refuseClick">面试未通过</el-button>
                <el-button type="success" @click="passClick">面试通过</el-button>
                <!-- <el-button type="primary" @click="faceClick">邀约面试</el-button> -->
                <el-dropdown trigger="click" style="margin-left: 16px;">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item>
                            <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item>
                            <!-- <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 4">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <el-button type="danger" v-if="state.datas.status == 5"
                    @click="refuseClickT(state.id)">背景调查未通过</el-button>
                <el-button type="success" v-if="state.datas.status == 5"
                    @click="passClickT(state.id)">背景调查通过</el-button>
                <el-button type="danger" v-if="state.datas.status == 6"
                    @click="refuseClickT(state.id)">体检未通过</el-button>
                <el-button type="success" v-if="state.datas.status == 6" @click="passClickT(state.id)">体检通过</el-button>
                <el-button type="danger" v-if="state.datas.status == 7" @click="refuseClickT(state.id)">放弃录用</el-button>
                <el-button type="success" v-if="state.datas.status == 7" @click="passClickT(state.id)">确认录用</el-button>
                <el-dropdown trigger="click" style="margin-left: 16px;">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item>
                            <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item>
                            <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item>
                            <!-- <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item> -->
                            <!-- <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 5">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <el-button type="danger" @click="FeedbackClick(1)">放弃入职</el-button>
                <el-button type="primary" @click="EmploymentClick(1)">发送入职通知</el-button>
                <el-button type="primary" @click="ruzhi">确认入职</el-button>
                <el-dropdown trigger="click" style="margin-left: 16px;">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item>
                            <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item>
                            <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item>
                            <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item>
                            <!-- <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item> -->
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 6">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="invite">邀请投递</el-button>
                <div class="flex aic margin-left16" style="margin-left: 26px;">
                    <p class="fonts16">投递职位：</p>
                    <el-select v-model="state.positionId" clearable placeholder="请选择投递职位" style="width: 180px">
                        <el-option v-for="item in state.positionOptions" :key="item.id" :label="item.positionName"
                            :value="item.id" />
                    </el-select>
                </div>
            </div>
            <div class="flex aic list_content_btn" v-if="state.type == 7">
                <el-button @click="go(-1)">返回</el-button>
                <el-button type="primary" @click="FeedbackClick(0)">添加反馈</el-button>
                <el-button type="primary" @click="refashClick">重新进入筛选</el-button>
                <el-button type="primary" @click="blickClick(0)" v-if="state.datas.blackList == 1">添加白名单</el-button>
                <el-button type="danger" @click="blickClick(1)" v-if="state.datas.blackList == 0">添加黑名单</el-button>
                <el-dropdown trigger="click" style="margin-left: 16px;">
                    <span class="el-dropdown-link">
                        <el-button type="danger">回退流程</el-button>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu style="width: 120px;">
                            <el-dropdown-item @click="backClick(1)">初筛</el-dropdown-item>
                            <el-dropdown-item @click="backClick(2)">应聘部门筛选</el-dropdown-item>
                            <el-dropdown-item @click="backClick(3)">笔试</el-dropdown-item>
                            <el-dropdown-item @click="backClick(4)">面试</el-dropdown-item>
                            <el-dropdown-item @click="backClick(5)">体检审查</el-dropdown-item>
                            <el-dropdown-item @click="backClick(8)">待入职</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-header>
        <div style="height: 70px;" class=""></div>
        <div v-loading="loading">
            <el-container v-if="state.type != 6">
                <el-header style="background-color:#FFFFFF;display:flex;align-items:center;overflow-x: auto;"
                    class="elheaders_bu">
                    <div class="flex aic" style="margin-bottom: 20px;">
                        <div :class="item.state == 1 ? 'elheaders_bu_divs' : ''" class="elheaders_bu_div"
                            v-for="(item, index) in state.navDatas" :key="index">
                            <div class="elheaders_bu_div_p">{{ item.label }}</div>
                        </div>
                    </div>
                </el-header>
            </el-container>
            <el-container style="padding-top:10px;position: relative;">
                <div class="aside_btn">
                    <el-button type="" :icon="DArrowLeft" link @click="openClick">应聘轨迹图</el-button>
                </div>
                <el-main style="padding:0;position: relative;">
                    <div class="flex jcsb aic">
                        <div class="flex aic elheaders_bu_main_header" v-if="state.type != 6">
                            <div @click="navClick(item)"
                                :class="state.navValue == item.id ? 'elheaders_bu_main_header_divs' : ''"
                                class="flex jcc aic fonts14 elheaders_bu_main_header_div"
                                v-for="(item, index) in state.navData" :key="index">
                                {{ item.label }}
                            </div>
                        </div>
                    </div>

                    <div class="" style="width: calc(100% - 19px);margin-top: 2px;">
                        <div v-if="state.navValue == 0">
                            <MainVue :id="state.registrationFromId" />
                        </div>
                        <div class="" v-if="state.navValue == 1">
                            <SureVue :data="state.resumeData" />
                        </div>
                        <!-- <div v-if="state.navValue == 2">
                            <el-empty description="暂无体检报告" style="width: 100%;height: 500px;" />
                        </div> -->
                    </div>
                </el-main>
                <el-aside v-if="state.type != 6 && state.navValue == 1" width="324px"
                    style="margin-top: 46px;position: relative;">
                    <div class="box-card-main-box">
                        <el-card class="box-card">
                            <p class="box-card-main-box-p fonts18 fontw700">职位要求</p>
                            <p class="fonts14">
                            <pre v-text="state.positionDetail?.positionDesc"></pre>
                            </p>
                        </el-card>
                    </div>
                    <div class="box-card-main-box" style="margin-top: 16px;" v-for="(item, index) in state.imageArray"
                        :key="index">
                        <el-card class="box-card">
                            <p class="box-card-main-box-p fonts18 fontw700">{{ item.title }}</p>
                            <div class="block text-center">
                                <el-carousel height="150px">
                                    <el-carousel-item v-for="(items, indexs) in item.url" :key="indexs">
                                        <div class="demo-image__preview">
                                            <el-image preview-teleported style="width: 100%; height: 100%"
                                                :src="items.url" :zoom-rate="1.2" :preview-src-list="[`${items.url}`]"
                                                :max-scale="7" :min-scale="0.2" fit="fill" />
                                        </div>
                                    </el-carousel-item>
                                </el-carousel>
                            </div>
                        </el-card>
                    </div>
                </el-aside>
            </el-container>
        </div>
        <!-- 笔试通知 -->
        <PenFail :table-data="state.penFailData" ref="ref_PenFailVue" />
        <PenVue :refuseData="state.penData" ref="ref_PenVue" @pen-click="penSureClick" />
        <PenFile :refuseData="state.penData" ref="ref_PenFile" @penFile-click="penFileSureClick" />
        <Refuse :refuseData="state.refuseData" ref="ref_refuse" @refuse-click="refuseSureClick" />
        <FaceVue :faceData="state.faceData" ref="ref_face" @face-click="faceSureClick" />
        <Feedback :FeedbackData="state.FeedbackData" ref="ref_Feedback" @Feedback-click="FeedbackSureClick" />
        <Checkup :CheckupData="state.CheckupData" ref="ref_Checkup" @Checkup-click="CheckupSureClick" />
        <Employment :EmploymentData="state.EmploymentData" ref="ref_Employment"
            @Employment-click="EmploymentSureClick" />
        <Publicity :PublicityData="state.PublicityData" ref="ref_Publicity" @Publicity-click="PublicitySureClick" />
        <DeteleVue ref="formChildrenRefs" :deteleData="state.deteleData" @deteleClick="deteleClick" />
        <!-- 人才库 -->
        <Refash ref="ref_refash" @refash-click="refashSureClick" />
        <!-- 放弃面试 -->
        <GiveUp :refuseData="state.refuseData" ref="ref_giveup" @GiveUp-click="GiveUpSureClick" />
        <!-- 发送简历给面试官 -->
        <SendResurme ref="ref_send" @send-click="sendClick" />
        <!-- 添加标签 -->
        <Dialog v-model="addTagBool" title="添加标签" width="420">
            <div class="message_p">
                <el-form :model="state.tagForm" ref="ruleFormRef" :rules="rules" label-width="120px"
                    label-position="top">
                    <el-form-item label="标签" prop="">
                        <el-select multiple v-model="state.tagForm.initialScreeningUnqualifiedLabel" clearable
                            placeholder="请选择标签" style="width: 100%;">
                            <el-option v-for="item in options1" :key="item.dictValue" :label="item.dictLabel"
                                :value="item.dictValue" />
                        </el-select>
                    </el-form-item>
                    <div class="flex jcfe aic" style="width: 100%;">
                        <el-button @click="addcloseClick">取消</el-button>
                        <el-button type="primary" @click="addSureClick(ruleFormRef)">确定</el-button>
                    </div>
                </el-form>
            </div>
        </Dialog>
        <!-- 应聘轨迹图 -->
        <el-drawer v-model="drawerBool" title="应聘轨迹图" direction="rtl" size="360px">
            <AsideVue v-for="(item, index) in state.datasLog" :key="index" :data="item" />
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { dictSect } from "@/utils/dictUnit"
import type { FormInstance, FormRules } from 'element-plus'
import { positionDetail } from "@/api/recruit/index"
import { Dialog } from '@/components/Dialog'
import {
    positionRegistrations,
    registrationLogBack,
    registrationLog,
    sendResumeEmail,
    positionRegistrationDetail,
    firstPass,
    firstNotPass,
    departmentPass,
    departmentNotPass,
    writtenExaminationPass,
    writtenExaminationNotPass,
    sendWrittenExaminationNotice,
    importWrittenExaminationScore,
    interviewPass,
    interviewNotPass,
    sendInterviewNotice,
    sendPhysicalExaminationNotice,
    companyAnnouncement,
    giveUpInterview,
    backgroundInvestigationPass,
    backgroundInvestigationNotPass,
    physicalExaminationPass,
    physicalExaminationNotPass,
    sendEmploymentNotice,
    sendEntryNotice,
    confirmEmployment,
    giveUpEmployment,
    confirmEntry,
    giveUpEntry,
    addFeedback,
    reFirstScreen,
    updateBackList,
    deleteResume,
    sendNotice
} from "@/api/home/index"
import { DArrowLeft } from '@element-plus/icons-vue'
import { editResumeList, getfindByUserId } from "@/api/personal/index"
import { ElButton, ElInput, ElMessage, ElMessageBox, ElSwitch } from 'element-plus'
import { dictFuns } from "@/utils/dictUnit"
import { positionListAll } from "@/api/recruit/index"
import { DeteleVue } from "@/components/Detele/index"
import { editPositionRegistration } from "@/api/personal/index"
import { FaceVue, Refuse, Feedback, Checkup, Employment, Publicity, PenVue, PenFile, PenFail, Refash, GiveUp, SendResurme } from "../Home/components/index"
import { AsideVue, MainVue, SureVue } from "./components/index"
import { reactive, onMounted, ref, onUpdated, watch, onActivated } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const { push, go } = useRouter()
const { query } = useRoute()
const drawerBool = ref(false)
const loading = ref(false)
const addTagBool = ref(false)
const options1: any = dictSect("resume_label")
const openClick = () => {
    drawerBool.value = true
}
const state = reactive({
    userId: "",
    datasLog: [] as any,
    options1: [] as any,
    tagForm: {} as any,
    registrationFromId: "",
    id: "" as any,
    positionOptions: [] as any,
    positionId: "",
    navValue: 0,
    navData: [
        {
            label: "应聘报名表",
            id: 0
        }, {
            label: "标准简历",
            id: 1
        },
        // {
        //     label: "体检报告",
        //     id: 2
        // }
    ],
    navDatas: [{
        label: "HR初筛",
        state: 0,
        id: 0
    }, {
        label: "应聘部门筛选",
        state: 0,
        id: 0
    }, {
        label: "笔试",
        state: 0,
        id: 0
    }, {
        label: "面试",
        state: 0,
        id: 0
    }, {
        label: "背景调查",
        state: 0,
        id: 0
    }, {
        label: "体检审查",
        state: 0,
        id: 0
    }, {
        label: "录用通知/公示",
        state: 0,
        id: 0
    }, {
        label: "待入职",
        state: 0,
        id: 0
    }, {
        label: "入职完成",
        state: 0,
        id: 0
    }],
    refuseData: {//未通过
        type: 0
    } as any,
    faceData: {},// 面试
    FeedbackData: {
        title: "添加反馈"
    },//反馈
    CheckupData: {},
    EmploymentData: {
        title: "录用通知"
    },
    PublicityData: {},//录用公示
    deteleData: {//删除框
        content: "该职位需求人数已满，请联系管理员增加职位需求人数！",
        title: "提示",
        sure: false,
        closeValue: false,
        knowBool: true
    },
    datas: {} as any,
    MainVueData: {},
    type: null as any,
    arrayIds: [] as any,
    tijianData: {} as any,
    resumeData: {},
    imageArray: [] as any,
    positionDetail: {} as any
})
// -------------------------------------------------------------------应聘-发送简历
const ref_send = ref()
const sendClicks = async () => {
    if (ref_send.value) {
        ref_send.value.DialogOpen()
    }
}
const sendClick = (data) => {
    console.log("发送邮件参数", data);
    let obj = {
        toMails: data.toMails,
        ids: [state.id],
        fileType: "word"
    }
    console.log("发送简历信息：", obj);
    sendResumeEmail(obj).then((res: any) => {
        ElMessage.success(res.msg)
        if (ref_send.value) {
            ref_send.value.DialogClose()
        }
        clearRefuse()
        positionRegistrationDetailApi(state.id)
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })
}
// --------------------------------------------邀请投递
const invite = () => {
    if (!state.positionId) {
        ElMessage.warning('请先选择投递职位!')
        return
    } else {
        ElMessageBox.confirm('确认邀请投递该职位？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            // inputPattern:,
            draggable: true,
            type: 'warning',
        }).then(() => {
            let obj = {
                positionId: state.positionId,
                userId: state.datas.personalInformation.userId
            }
            editResumeList(obj).then((res: any) => {
                ElMessage({
                    type: 'success',
                    message: `${res.msg}`,
                })
            }).catch((res: any) => {
                ElMessage({
                    type: 'error',
                    message: `${res.msg}`,
                })
            })
        }).catch(() => {
            ElMessage({
                type: 'info',
                message: '取消操作',
            })
        })
    }
}

// -------------------------------------------------------------------------------------------------------
const ref_refash = ref()
const refashClick = () => {// ---------------------------------人才库重新进入初筛
    if (ref_refash.value) {
        ref_refash.value.DialogOpen()
    }

}
const refashSureClick = (data) => {
    console.log(data);
    let arrays = [] as any
    let obj = {
        positionId: data.positionRegistrationId,
        id: state.id
    }
    arrays.push(obj)
    console.log("人才库重新进入初筛：", arrays);
    reFirstScreen(arrays).then((res: any) => {
        ElMessage.success(res.msg)
        if (ref_refash.value) {
            ref_refash.value.DialogClose()
        }
        clearRefuse()
        positionRegistrationDetailApi(state.id)
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })
}
const blickClick = (item) => {
    let arrays = [] as any
    let obj = {
        blackList: item,
        id: state.id
    }
    arrays.push(obj)
    console.log("人才库黑名单：", arrays);
    updateBackList(arrays).then((res: any) => {
        ElMessage.success(res.msg)
        positionRegistrationDetailApi(state.id)
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })
}
// --------------------------------添加标签
interface RuleForm {
    initialScreeningUnqualifiedLabel: string
}
const ruleFormRef = ref<FormInstance>()
const rules = reactive<FormRules<RuleForm>>({
    initialScreeningUnqualifiedLabel: [{ required: true, message: '请填写标签内容', trigger: 'blur' }],
})
const addClick = () => {
    addTagBool.value = true
    state.tagForm = {
        initialScreeningUnqualifiedLabel: splitFun(state.datas?.initialScreeningUnqualifiedLabel)
    }
}
const addcloseClick = () => {
    addTagBool.value = false
}
const splitFun = (res) => {
    let data = [] as any
    if (res) {
        data = res.split(',')
    }
    return data
}
const stringFun = (res) => {
    let string = ""
    if (res) {
        res.forEach(element => {
            if (string) {
                string = string + "," + element
            } else {
                string = element
            }
        });
    }
    return string
}
const addSureClick = async (formEl: FormInstance | undefined) => {
    console.log("标签确定：", state.datas, state.tagForm.initialScreeningUnqualifiedLabel);
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            let obj = [{
                id: state.datas.id,
                initialScreeningUnqualifiedLabel: stringFun(state.tagForm.initialScreeningUnqualifiedLabel)
            }]
            editPositionRegistration(obj).then(res => {
                ElMessage.success(res.msg)
                addcloseClick()
            }).catch(res => {
                ElMessage.error(res.msg)
            })
        } else {
        }
    })
}

// --------------------------------------------------------回退流程----------------------------------------------
const backClick = async (index) => {//------------------------------
    let arrays = [] as any
    let obj = {
        positionRegistrationId: state.id,
        status: index
    }
    arrays.push(obj)
    console.log("通过数据：", arrays);
    ElMessageBox.confirm('确认将简历进行回退操作?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // inputPattern:,
        draggable: true,
        type: 'warning',
    }).then(() => {
        registrationLogBack(arrays).then((res: any) => {
            ElMessage.success(res.msg)
            clearRefuse()
            positionRegistrationDetailApi(state.id)
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: '取消操作',
        })
    })

}
// --------------------------------------------------------回退结束----------------------------------------------
// -------------------------------通过
const passClick = () => {//------------------------------

    let arrays = [] as any
    let obj = {
        positionRegistrationId: state.id,
    }
    arrays.push(obj)
    console.log("通过数据：", arrays);
    switch (state.type) {
        case 0://初筛通过
            firstPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 1://应聘部门通过
            departmentPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 2://笔试通过
            writtenExaminationPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 3://面试通过
            interviewPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 4://体检通过
            physicalExaminationPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;

        default:
            break;
    }

}
const passClickT = (item) => {//-------------------------------------体检审查通过
    let arrays = [] as any
    let obj = {
        positionRegistrationId: item,
    }
    arrays.push(obj)
    console.log("通过数据：", arrays);
    if (state.datas.status == 5) {
        backgroundInvestigationPass(arrays).then((res: any) => {
            ElMessage.success(res.msg)
            clearRefuse()
            positionRegistrationDetailApi(state.id)
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    } else if (state.datas.status == 6) {
        physicalExaminationPass(arrays).then((res: any) => {
            ElMessage.success(res.msg)
            clearRefuse()
            positionRegistrationDetailApi(state.id)
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    } else if (state.datas.status == 7) {
        confirmEmployment(arrays).then((res: any) => {
            ElMessage.success(res.msg)
            clearRefuse()
            positionRegistrationDetailApi(state.id)
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    }
}
// -----------------------------未通过

const ref_refuse = ref()
const ref_giveup = ref()
const GiveUpClick = () => {
    state.refuseData.type = state.type
    if (ref_giveup.value) {
        ref_giveup.value.DialogOpen()
    }
}
const GiveUpSureClick = (data) => {//-----------------------------------
    let arrays = [] as any
    let obj = {
        positionRegistrationId: state.id,
        content: data.content
    }
    arrays.push(obj)
    giveUpInterview(arrays).then((res: any) => {
        ElMessage.success(res.msg)
        positionRegistrationDetailApi(state.id)
        if (ref_giveup.value) {
            ref_giveup.value.DialogClose()
        }
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })

}
const refuseClick = () => {
    state.refuseData.type = state.type
    if (ref_refuse.value) {
        ref_refuse.value.DialogOpen()
    }
}
const refuseClickT = (item) => {//---------------------------------------体检审查不通过
    state.refuseData.type = state.type
    state.tijianData = item
    if (ref_refuse.value) {
        ref_refuse.value.DialogOpen()
    }
}
const refuseSureClick = (data) => {//-----------------------------------
    console.log(data);
    let arrays = [] as any
    if (state.type != 4) {
        let obj = {
            positionRegistrationId: state.id,
            content: data.content
        }
        arrays.push(obj)
    } else {
        let obj = {
            positionRegistrationId: state.tijianData,
            remark: data.content
        }
        arrays.push(obj)
    }
    console.log("未通过数据：", arrays);
    // return
    switch (state.type) {
        case 0://初筛不通过
            firstNotPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 1://应聘部门不通过
            departmentNotPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 2://笔试不通过
            writtenExaminationNotPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 3://面试不通过
            interviewNotPass(arrays).then((res: any) => {
                ElMessage.success(res.msg)
                clearRefuse()
                positionRegistrationDetailApi(state.id)
            }).catch((res: any) => {
                ElMessage.error(res.msg)
            })
            break;
        case 4://体检不通过
            if (state.datas.status == 5) {
                backgroundInvestigationNotPass(arrays).then((res: any) => {
                    ElMessage.success(res.msg)
                    clearRefuse()
                    positionRegistrationDetailApi(state.id)
                }).catch((res: any) => {
                    ElMessage.error(res.msg)
                })
            } else if (state.datas.status == 6) {
                physicalExaminationNotPass(arrays).then((res: any) => {
                    ElMessage.success(res.msg)
                    clearRefuse()
                    positionRegistrationDetailApi(state.id)
                }).catch((res: any) => {
                    ElMessage.error(res.msg)
                })
            } else if (state.datas.status == 7) {
                giveUpEmployment(arrays).then((res: any) => {
                    ElMessage.success(res.msg)
                    clearRefuse()
                    positionRegistrationDetailApi(state.id)
                }).catch((res: any) => {
                    ElMessage.error(res.msg)
                })
            }

            break;

        default:
            break;
    }

}

function clearRefuse() {
    state.arrayIds = []
    if (ref_refuse.value) {
        ref_refuse.value.DialogClose()
    }
}

const ref_PenVue = ref()// -----------------------------笔试
const PenClick = () => {


    state.penData.type = props.type
    if (ref_PenVue.value) {
        ref_PenVue.value.DialogOpen()
    }
}
const penSureClick = (data) => {
    let arrays = [] as any
    arrays.push({ positionRegistrationId: state.id, logName: data.logName, content: data.content, param: data.param, templateId: data.templateId })
    console.log("笔试通知数据：", arrays);
    sendNotice(arrays).then((res: any) => {
        ElMessage.success(res.msg)
        clearPen()
        positionRegistrationDetailApi(state.id)
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })

}
function clearPen() {
    state.arrayIds = []
    checkAll.value = false
    if (ref_PenVue.value) {
        ref_PenVue.value.DialogClose()
    }
}
const ref_PenFile = ref()
const ref_PenFailVue = ref()
const PenFileClick = () => {
    // let arr = arrayIds()
    // if (arr.length == 0) {
    //     return
    // } else {
    //     state.arrayIds = arr
    // }

    // state.penData.type = props.type
    if (ref_PenFile.value) {
        ref_PenFile.value.DialogOpen()
    }
}
const penFileSureClick = (data) => {
    let obj = {
        param: { file: data.file },
        passingGrade: data.passingGrade,
        recruitmentPositionId: data.recruitmentPositionId,
    }
    console.log("笔试上传数据：", obj);
    importWrittenExaminationScore(obj).then((res: any) => {
        // ElMessage.success(res.msg)
        clearPenFile()
        state.penFailData = res.data
        if (ref_PenFailVue.value) {
            ref_PenFailVue.value.DialogOpen()
        }
        positionRegistrationDetailApi(state.id)
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })
}
function clearPenFile() {
    state.arrayIds = []
    checkAll.value = false
    if (ref_PenFile.value) {
        ref_PenFile.value.DialogClose()
    }
}
// ----------------------------面试
const ref_face = ref()
const faceClick = () => {

    if (ref_face.value) {
        ref_face.value.DialogOpen()
    }
}
const faceSureClick = (data) => {
    let arrays = [] as any
    arrays.push({ positionRegistrationId: state.id, logName: data.logName, content: data.content, param: data.param, templateId: data.templateId })
    console.log("邀约面试通知数据：", arrays);
    sendNotice(arrays).then((res: any) => {
        ElMessage.success(res.msg)
        state.arrayIds = []
        positionRegistrationDetailApi(state.id)
        if (ref_face.value) {
            ref_face.value.DialogClose()
        }
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })
}
// ----------------------------反馈
const ref_Feedback = ref()
const FeedbackClick = (index) => {

    if (index == 0) {
        state.FeedbackData.title = "添加反馈"
    } else if (index == 1) {
        state.FeedbackData.title = "放弃入职"
    }
    if (ref_Feedback.value) {
        ref_Feedback.value.DialogOpen()
    }
}
const FeedbackSureClick = (value) => {
    console.log("放弃入职：", value);
    if (state.FeedbackData.title == "添加反馈") {
        let obj = {
            positionRegistrationId: state.id,
            content: value,
        }
        console.log("添加反馈数据：", obj);
        addFeedback(obj).then((res: any) => {
            ElMessage.success(res.msg)
            clearFeedback()
            state.arrayIds = []
            positionRegistrationDetailApi(state.id)
            if (ref_face.value) {
                ref_face.value.DialogClose()
            }
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    } else {
        let obj = {
            param: [{ positionRegistrationId: state.id }],
            content: value,
        }

        console.log("放弃入职数据：", obj);
        giveUpEntry(obj).then((res: any) => {
            ElMessage.success(res.msg)
            clearFeedback()
            state.arrayIds = []
            positionRegistrationDetailApi(state.id)
            if (ref_face.value) {
                ref_face.value.DialogClose()
            }
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    }

}
function clearFeedback() {
    if (ref_Feedback.value) {
        ref_Feedback.value.DialogClose()
    }
}
// ----------------------------体检通知
const ref_Checkup = ref()
const CheckupClick = () => {

    if (ref_Checkup.value) {
        ref_Checkup.value.DialogOpen()
    }
}
const CheckupSureClick = (data) => {
    let arrays = [] as any
    state.arrayIds.forEach(element => {
        arrays.push({ positionRegistrationId: element.id })
    });
    let obj = {
        param: arrays,
        time: data.time,
        location: data.location,
        notice: data.notice,
        interviewRound: data.interviewRound
    }
    console.log("体检通知数据：", obj);
    sendPhysicalExaminationNotice(obj).then((res: any) => {
        ElMessage.success(res.msg)
        clearPenFile()
        state.penFailData = res.data
        state.arrayIds = []
        positionRegistrationDetailApi(state.id)
        if (ref_Checkup.value) {
            ref_Checkup.value.DialogClose()
        }
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })

}
// ----------------------------录用通知
const ref_Employment = ref()
const EmploymentClick = (index) => {

    if (index == 0) {
        state.EmploymentData.title = "录用通知"
    } else if (index == 1) {
        state.EmploymentData.title = "发送入职通知"
    }
    if (ref_Employment.value) {
        ref_Employment.value.DialogOpen()
    }
}
function formatDate(date) {
    var year = date.getFullYear();

    var month = (1 + date.getMonth()).toString();
    month = month.padStart(2, '0');

    var day = date.getDate().toString();
    day = day.padStart(2, '0');

    var hours = date.getHours().toString();
    hours = hours.padStart(2, '0');

    var minutes = date.getMinutes().toString();
    minutes = minutes.padStart(2, '0');

    var seconds = date.getSeconds().toString();
    seconds = seconds.padStart(2, '0');

    return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
}
const timeS = (res) => {
    let arr = res.split("_")
    let string = arr[0] + " " + arr[1]
    return string
}
const EmploymentSureClick = (data) => {
    console.log("发送入职通知：", data);

    if (state.EmploymentData.title == "录用通知") {
        let arrays = [] as any
        state.arrayIds.forEach(element => {
            arrays.push({ positionRegistrationId: element.id })
        });
        let obj = {
            param: arrays,
            time: data.time,
            location: data.location,
            notice: data.notice,
            interviewRound: data.interviewRound
        }
        console.log("录用通知数据：", obj);
        sendEmploymentNotice(obj).then((res: any) => {
            ElMessage.success(res.msg)
            clearPenFile()
            clearRefuse()
            positionRegistrationDetailApi(state.id)
            if (ref_face.value) {
                ref_face.value.DialogClose()
            }
        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    } else if (state.EmploymentData.title == "发送入职通知") {
        let arrays = [] as any
        let arrays_updata = [] as any
        arrays_updata.push({ id: state.id, onBoardingTime: timeS(data.param[5]), onBoardingLocation: data.param[2] })
        arrays.push({ positionRegistrationId: state.id, logName: data.logName, content: data.content, param: data.param, templateId: data.templateId })
        // state.arrayIds.forEach(element => {
        //     arrays.push({ positionRegistrationId: element.id, logName: data.logName, content: data.content, param: data.param, templateId: data.templateId })
        // });

        console.log("发送入职通知", arrays);
        sendNotice(arrays).then((res: any) => {
            ElMessage.success(res.msg)
            clearPenFile()
            clearRefuse()
            positionRegistrationDetailApi(state.id)
            if (ref_face.value) {
                ref_face.value.DialogClose()
            }
            // positionRegistrations(arrays_updata).then((res: any) => {

            // })

        }).catch((res: any) => {
            ElMessage.error(res.msg)
        })
    }
    if (ref_Employment.value) {
        ref_Employment.value.DialogClose()
    }
}
// ----------------------------录用公示
const ref_Publicity = ref()
const PublicityClick = () => {
    let arr = arrayIds()
    if (arr.length == 0) {
        return
    } else {
        state.arrayIds = arr
        state.PublicityData.arraysIds = state.arrayIds
        state.PublicityData.number = state.arrayIds.length
    }
    if (ref_Publicity.value) {
        ref_Publicity.value.DialogOpen()
    }
}
const PublicitySureClick = (data) => {
    let obj = {
        announcementTitle: data.announcementTitle,
        announcementContents: data.announcementContents,
        remark: JSON.stringify(data.arrayIds),
    }
    console.log("公示通知数据：", obj);
    companyAnnouncement(obj).then((res: any) => {
        ElMessage.success(res.msg)
        positionRegistrationDetailApi(state.id)
        if (ref_Publicity.value) {
            ref_Publicity.value.DialogClose()
        }
    }).catch((res: any) => {
        ElMessage.error(res.msg)
    })

}
// ----------------------------------确认入职
const formChildrenRefs = ref()
const ruzhi = () => {
    let arrays = [] as any
    arrays.push({ positionRegistrationId: state.id })
    // let obj = {
    //     param: arrays,
    // }
    console.log("确认入职数据：", arrays);
    confirmEntry(arrays).then((res: any) => {
        ElMessage.success(res.msg)
        state.arrayIds = []
        positionRegistrationDetailApi(state.id)
        // if (formChildrenRefs.value) {
        //     formChildrenRefs.value.DialogOpen()
        // }
    }).catch((res: any) => {
        console.log(res);

        // ElMessage.error(res.msg)
        state.deteleData.content = '招聘人数已满'
        if (formChildrenRefs.value) {
            formChildrenRefs.value.DialogOpen()
        }
    })

}
function arrayIds() {
    let array = [] as any
    state.list.forEach(element => {
        if (element.checked) {
            array.push(element)
        }
    });
    if (array.length == 0) {
        ElMessage.warning("至少选择一份简历！")
        return []
    } else {
        return array
    }
}
// --------------------------------------------------------------------------------------------------------
const navClick = (item) => {
    state.navValue = item.id
    if (state.navValue == 0) {
        state.datas = state.datas
    } else if (state.navValue == 1) {
        state.resumeData = state.resumeData
    } else {

    }
}

const infos = () => {
    console.log(query);
    state.id = query.id
    state.type = query.type
    // getfindByUserIdApi(query.id)
    if (state.type == 6) {
        state.navValue = 1
        getfindByUserIdApi(query.id)
    } else {
        positionRegistrationDetailApi(state.id)
    }
    positionListAllApi()

}
// const route = useRouter()
// watch(() => route.currentRoute, (newValue: any) => {
//     console.log("刷新", newValue);
//     infos()
// })
onActivated(() => {
    infos()
})

onMounted(() => {
    infos()

})
const positionListAllApi = async () => {
    await positionListAll().then(res => {
        // console.log("全部职位", res);
        state.positionOptions = res.data
    })
}

const getfindByUserIdApi = async (params) => {
    loading.value = true
    await getfindByUserId(params).then(res => {
        loading.value = false
        console.log("详情数据type6", res);
        state.datas = res.data
        // state.resumeData = res.data
    })
}
const positionDetailApi = async (id) => {
    await positionDetail(id).then(res => {
        state.positionDetail = res.data
        console.log("职位详情", res.data);


    })
}
const positionRegistrationDetailApi = async (params) => {
    loading.value = true
    await positionRegistrationDetail(params).then(res => {
        console.log("简历详情:", res.data);
        state.userId = res.data.userId
        loading.value = false
        state.resumeData = res.data?.resumeVo
        state.registrationFromId = res.data?.registrationFromId
        if (!state.registrationFromId) {
            state.navData = [
                {
                    label: "标准简历",
                    id: 1
                },
            ]
            state.navValue = 1
        }
        state.datas = res.data
        positionDetailApi(res.data.positionId)
        let index = state.datas.status
        console.log("----流程点：", state.datas.status);

        if (index < 0) {
            state.navDatas.forEach((element, key) => {
                element.state = 0
            });
        } else {
            state.navDatas.forEach((element, key) => {
                element.state = 0
                if (key < index) {
                    element.state = 1
                }
            });
        }
        if (index == -9) {
            state.navDatas.forEach((element, key) => {
                element.state = 1
            });
        }
        if (state.datas.status == "1") {//初筛
            state.type = 0
        } else if (state.datas.status == "2") {//应聘部门筛选
            state.type = 1
        } else if (state.datas.status == "3") {//笔试
            state.type = 2
        } else if (state.datas.status == "4") {//面试
            state.type = 3
        } else if (state.datas.status == "5" || state.datas.status == "6" || state.datas.status == "7") {//体检
            state.type = 4
        } else if (state.datas.status == "8") {//待入职
            state.type = 5
        }
        else if (state.datas.status < 0) {//人才库
            if (state.datas.status == '-9') {
                state.type = 5
            } else {
                state.type = 7
            }
        }
        console.log("详情数据", res, state.navDatas, state.datas.status);
        info()
    })
}

function info() {
    console.log("info:", state.resumeData);
    console.log("getregistrationLogApi", state.userId);
    getregistrationLogApi({ userId: state.userId })
    state.imageArray = []
    let educationExperiences = state.resumeData?.educationExperiences
    if (educationExperiences) {
        let obj = {
            title: "学历附件",
            url: [] as any
        } as any
        educationExperiences.forEach(element => {
            element.files?.forEach(file => {
                obj.url.push(file)
            });
        });
        state.imageArray.push(obj)
    } else {
        let obj = {
            title: "学历附件",
            url: [] as any
        } as any
        state.imageArray.push(obj)

    }
    let certificates = state.resumeData?.certificates
    if (certificates) {
        let obj = {
            title: "资格证书附件",
            url: [] as any
        } as any
        certificates.forEach(element => {
            element.files?.forEach(file => {
                obj.url.push(file)
            });
        });
        state.imageArray.push(obj)
    } else {
        let obj = {
            title: "资格证书附件",
            url: [] as any
        } as any
        state.imageArray.push(obj)

    }
    let medicalReportFiles = state.datas?.medicalReportFiles
    if (medicalReportFiles) {
        let obj = {
            title: "体检附件",
            url: [] as any
        } as any
        medicalReportFiles.forEach(element => {
            obj.url.push(element)
        });
        state.imageArray.push(obj)
    } else {
        let obj = {
            title: "体检附件",
            url: [] as any
        } as any
        state.imageArray.push(obj)

    }
    let noCriminalRecordFiles = state.datas?.noCriminalRecordFiles //犯罪记录证明
    if (noCriminalRecordFiles) {
        let obj = {
            title: "无犯罪记录证明附件",
            url: [] as any
        } as any
        noCriminalRecordFiles.forEach(element => {
            obj.url.push(element)
        });
        state.imageArray.push(obj)
    } else {
        let obj = {
            title: "无犯罪记录证明附件",
            url: [] as any
        } as any
        state.imageArray.push(obj)

    }

}

const getregistrationLogApi = async (params) => {
    loading.value = true
    await registrationLog(params).then(res => {
        loading.value = false
        // console.log("详情数据type6", res);
        state.datasLog = res.data
        // state.resumeData = res.data
    })
}

</script>

<style lang="less" scoped>
.box-card-main-box {
    position: relative;

    .box-card-main-box-p {
        position: relative;
        margin-bottom: 16px;

        &::after {
            position: absolute;
            content: "";
            top: 5px;
            left: -20px;
            z-index: 9;
            width: 4px;
            height: 16px;
            background: #2F6CBC;
            border-radius: 0px 2px 2px 0px;
            opacity: 1;
        }

    }
}

.aside_btn {
    z-index: 99;
    position: absolute;
    top: 30px;
    right: 10px;
    font-size: 14px;
    font-weight: 400;
    color: #52525A;
    line-height: 14px;

    &:hover {
        color: #2F6CBC;
    }
}

.elheaders {
    height: 70px;
    width: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
}

.list_content_btn {
    .el-button {
        height: 40px;
    }
}

.elheaders_bu_main_header {
    height: 44px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
}

.elheaders_bu {
    height: 98px;
    background: #FFFFFF;

    &::-webkit-scrollbar {
        width: 100px;
        height: 6px;
        background-color: #FFFFFF;
    }

    &::-webkit-scrollbar-thumb {
        border-radius: 6px;
        background-color: #c1c1c1;
    }
}

.elheaders_bu_main_header_div {
    width: 120px;
    height: 44px;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    position: relative;

    &::after {
        position: absolute;
        content: "";
        top: 13px;
        height: 18px;
        width: 1px;
        background-color: #D5D8E4;
        left: 0;
    }

    &::before {
        position: absolute;
        content: "";
        top: 13px;
        height: 18px;
        width: 1px;
        background-color: #D5D8E4;
        right: 0;
    }
}

.elheaders_bu_main_header_divs {
    background: #FFFFFF;
    color: #2F6CBC;
}

.elheaders_bu_div {
    margin-right: 132px;
    width: 16px;
    height: 16px;
    opacity: 1;
    border: 1px solid #979797;
    border-radius: 50%;
    position: relative;

    &:nth-child(1) {
        margin-left: 24px;

        &::before {
            display: none;
        }
    }

    &::after {
        top: 4px;
        left: 4px;
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        background: #979797;
        opacity: 1;
        border-radius: 50%;

    }

    &::before {
        position: absolute;
        content: "";
        top: 7.5px;
        left: -132px;
        width: 129px;
        opacity: 1;
        border: 1px dashed #EAE8F2;

    }
}

.elheaders_bu_divs {
    margin-right: 132px;
    width: 16px;
    height: 16px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    border-radius: 50%;
    position: relative;

    &:nth-child(1) {
        &::before {
            display: none;
        }
    }

    &::after {
        top: 4px;
        left: 4px;
        position: absolute;
        content: "";
        width: 8px;
        height: 8px;
        background: #2F6CBC;
        opacity: 1;
        border-radius: 50%;

    }

    &::before {
        position: absolute;
        content: "";
        top: 7.5px;
        left: -132px;
        width: 129px;
        opacity: 1;
        border: 1px dashed #2F6CBC;
    }
}

.elheaders_bu_div_p {
    position: absolute;
    width: 120px;
    text-align: center;
    left: -48px;
    bottom: -24px;
}

.detail_content {}
</style>